<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:fragment="head">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="Viva商城">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta property="og:title" content="">
        <meta property="og:type" content="">
        <meta property="og:url" content="">
        <meta property="og:image" content="">
        <!-- Favicon -->
        <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/front/imgs/theme/favicon.svg}">
        <!-- Template CSS -->
        <link rel="stylesheet" th:href="@{/assets/front/css/main.css?v=3.4}">
        <!--    layui-->
        <link rel="stylesheet" th:href="@{/assets/lib/layui/css/layui.css}">
        <script th:src="@{/assets/lib/layui/layui.js}"></script>

        <!--定义上下文路径-->
        <script th:inline="javascript">
            let ctx = /*[[@{/}]]*/"";//上下文路径
            if (ctx.endsWith("/")) {
                ctx = ctx.substring(0, ctx.length - 1);
            }
        </script>
    </th:block>
</head>
<body>
<!--快速浏览，js动态生成-->
<!-- Quick view -->
<div th:fragment="quickView" class="modal fade custom-modal" id="quickViewModal" tabindex="-1"
     aria-labelledby="quickViewModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="detail-gallery">
                            <span class="zoom-icon"><i class="fi-rs-search"></i></span>
                            <!-- 主图，动态生成 -->
                            <div class="product-image-slider">
                                <figure class="border-radius-10">
                                    <img th:src="@{/assets/front/imgs/shop/product-16-2.jpg}" alt="product image">
                                </figure>
                            </div>
                        </div>
                        <!-- End Gallery -->
                        <div class="social-icons single-share">
                            <ul class="text-grey-5 d-inline-block">
                                <li><strong class="mr-10">Share this:</strong></li>
                                <li class="social-facebook"><a href="#"><img
                                        th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a></li>
                                <li class="social-twitter"><a href="#"><img
                                        th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a></li>
                                <li class="social-instagram"><a href="#"><img
                                        th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a></li>
                                <li class="social-linkedin"><a href="#"><img
                                        th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
<!--                    js动态生成-->
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="detail-info">
                            <h3 class="title-detail mt-30"></h3>
                            <div class="product-detail-rating">
                                <div class="pro-details-brand">
                                    <span> 品牌:暂无</span>
                                </div>
                                <div class="product-rate-cover text-end">
                                    <div class="product-rate d-inline-block">
                                        <div class="product-rating" style="width:90%">
                                        </div>
                                    </div>
                                    <span class="font-small ml-5 text-muted"> (25 条评论)</span>
                                </div>
                            </div>
                            <div class="clearfix product-price-cover">
                                <div class="product-price primary-color float-left">
                                    <ins><span class="new-price">$120.00</span></ins>
                                    <ins><span class="old-price font-md ml-15">$200.00</span></ins>
                                    <span class="save-price  font-md color3 ml-15">无折扣</span>
                                </div>
                            </div>
                            <div class="bt-1 border-color-1 mt-15 mb-15"></div>
                            <div class="short-desc mb-30">
                                <p class="font-sm"></p>
                            </div>

                            <div class="attr-detail attr-color mb-15">
                                <strong class="mr-10">颜色</strong>
                                <ul class="list-filter color-filter">
                                    <li><a href="#" data-color="Red"><span class="product-color-red"></span></a></li>
                                    <li><a href="#" data-color="Yellow"><span class="product-color-yellow"></span></a>
                                    </li>
                                    <li class="active"><a href="#" data-color="White"><span
                                            class="product-color-white"></span></a></li>
                                    <li><a href="#" data-color="Orange"><span class="product-color-orange"></span></a>
                                    </li>
                                    <li><a href="#" data-color="Cyan"><span class="product-color-cyan"></span></a></li>
                                    <li><a href="#" data-color="Green"><span class="product-color-green"></span></a>
                                    </li>
                                    <li><a href="#" data-color="Purple"><span class="product-color-purple"></span></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="attr-detail attr-size">
                                <strong class="mr-10">型号</strong>
                                <ul class="list-filter size-filter font-small">
                                    <li><a href="#">S</a></li>
                                    <li class="active"><a href="#">M</a></li>
                                    <li><a href="#">L</a></li>
                                    <li><a href="#">XL</a></li>
                                    <li><a href="#">XXL</a></li>
                                </ul>
                            </div>
                            <div class="bt-1 border-color-1 mt-30 mb-30"></div>
                            <ul class="product-meta font-xs color-grey mt-50">
                                <li class="mb-5 sku">SKU编号: 未知</li>
                                <li class="mb-5 cat">种类: 全部</a>
                                </li>
                                <li>库存状态:<span class="in-stock text-success ml-5">未知</span></li>
                            </ul>
                        </div>
                        <!-- Detail Info -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--头部-->
<header th:fragment="header" class="header-area header-style-1 header-height-2">
    <div class="header-top header-top-ptb-1 d-none d-lg-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-3 col-lg-4">
                    <div class="header-info">
                        <ul>
                            <li><i class="fi-rs-smartphone"></i> <a href="#">(+01) - 2345 - 6789</a></li>
                            <li><i class="fi-rs-marker"></i><a th:href="@{/vm/front/page-contact}">我们的位置</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-4"></div>
                <div class="col-xl-3 col-lg-4">
                    <div class="header-info header-info-right">
                        <ul>
                            <li th:if="${member!=null}">
                                <a th:href="@{/vm/front/account}" title="个人中心">
                                    <i class="fi-rs-user"></i>
                                    <span th:text="${member.account}">账号名</span>
                                </a>
                            </li>
                           <li>
<!--                               如果member不为空-->
                               <a th:if="${member!=null}" th:href="@{/vm/front/logout}"
                                  style="margin-left: 40px" title="退出登录">
                                   <i class="fi-rs-sign-out"></i>
                               </a>
                               <!-- 如果 member 为 null -->
                               <a th:unless="${member != null}" th:href="@{/vm/front/login}"
                                  style="margin-left: 40px"  title="登录">
                                   <i class="fi-rs-sign-in"></i>
                               </a>

                           </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-middle header-middle-ptb-1 d-none d-lg-block">
        <div class="container">
            <div class="header-wrap">
                <div class="logo logo-width-1">
                    <a th:href="@{/vm/front/index}"><img th:src="@{/assets/front/imgs/theme/logo.png}" alt="logo"></a>
                </div>
                <div class="header-right">
                    <div class="search-style-2">
                        <form action="/vm/front/goods/grid" method="get">
                            <select class="select-active" name="categoryId">
<!--                                选项通过js动态填充-->
                            </select>
                            <input name="keyword" type="text" placeholder="搜索商品...">
                        </form>
                    </div>
                    <div class="header-action-right">
                        <div class="header-action-2">
                            <div class="header-action-icon-2">
                                <a class="mini-cart-icon" th:href="@{/vm/front/shop/wishlist}" title="收藏列表">
                                    <img class="svgInject" alt="Viva"
                                         th:src="@{/assets/front/imgs/theme/icons/icon-heart.svg}">
                                    <span th:if="${member!=null}" th:text="${wis.size()}"
                                          class="pro-count blue" >2</span>
                                </a>

                            </div>
                            <div class="header-action-icon-2">
                                <a class="mini-cart-icon" th:href="@{/vm/front/shop/cart}">
                                    <img alt="Viva" th:src="@{/assets/front/imgs/theme/icons/icon-cart.svg}">
                                    <span th:if="${member!=null}" th:text="${cartItems.size()}"
                                    class="pro-count blue" >2</span>
                                </a>
                                <div class="cart-dropdown-wrap cart-dropdown-hm2" th:if="${member!=null}">
                                    <div class="shopping-cart-footer">
                                        <div class="shopping-cart-button">
                                            <a th:href="@{/vm/front/shop/cart}" class="outline">查看购物车</a>
                                            <a th:if="${lastCreatedOrder!=null}"
                                               th:href="@{/vm/front/shop/checkout(id=${lastCreatedOrder.id})}">查看结算单</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom header-bottom-bg-color sticky-bar">
        <div class="container">
            <div class="header-wrap header-space-between position-relative">
                <div class="logo logo-width-1 d-block d-lg-none">
                    <a th:href="@{/vm/front/index}"><img th:src="@{/assets/front/imgs/theme/logo.png}" alt="logo"></a>
                </div>
                <div class="header-nav d-none d-lg-flex" style="width: 800px">
                    <div class="main-categori-wrap d-none d-lg-block">
                        <a class="categori-button-active" href="#">
                            <span class="fi-rs-apps"></span>全部种类
                        </a>
                        <div class="categori-dropdown-wrap categori-dropdown-active-large">
                            <ul id="categories">
<!--                                内容通过js动态填充-->
                            </ul>
                        </div>
                    </div>
                    <div class="main-menu main-menu-padding-1 main-menu-lh-2 d-none d-lg-block">
                        <nav>
                            <ul>
                                <li><a class="active" th:href="@{/vm/front/index}">主页 </a></li>
                                <li><a th:href="@{/vm/front/goods/grid}">商品</a></li>
                                <li><a href="#">帮助 <i class="fi-rs-angle-down"></i></a>
                                    <ul class="sub-menu">
                                        <li><a th:href="@{/vm/front/purchase-guide}">购物指南</a></li>
                                        <li><a th:href="@{/vm/front/privacy-policy}">隐私政策</a></li>
                                        <li><a th:href="@{/vm/front/terms}">服务条款</a></li>
                                    </ul>
                                </li>
                                <li><a th:href="@{/vm/front/about}">关于商城</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="hotline d-none d-lg-block">
                    <p><i class="fi-rs-headset"></i><span>热线</span> 8888 - 888 </p>
                </div>
                <p class="mobile-promotion"><span class="text-brand">大促销！</span> 打折 40%</p>
                <div class="header-action-right d-block d-lg-none">
                    <div class="header-action-2">
                        <div class="header-action-icon-2">
                            <a th:href="@{/vm/front/shop/wishlist}">
                                <img alt="Viva" th:src="@{/assets/front/imgs/theme/icons/icon-heart.svg}">
                                <span class="pro-count white">4</span>
                            </a>
                        </div>
                        <div class="header-action-icon-2">
                            <a class="mini-cart-icon" th:href="@{/vm/front/shop/cart}">
                                <img alt="Viva" th:src="@{/assets/front/imgs/theme/icons/icon-cart.svg}">
                                <span class="pro-count white">2</span>
                            </a>
                            <div class="cart-dropdown-wrap cart-dropdown-hm2">
                                <ul>
                                    <li>
                                        <div class="shopping-cart-img">
                                            <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                <img alt="Viva" th:src="@{/assets/front/imgs/shop/thumbnail-3.jpg}">
                                            </a>
                                        </div>
                                        <div class="shopping-cart-title">
                                            <h4>
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">Plain Striola Shirts</a>
                                            </h4>
                                            <h3><span>1 × </span>$800.00</h3>
                                        </div>
                                        <div class="shopping-cart-delete">
                                            <a href="#"><i class="fi-rs-cross-small"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="shopping-cart-img">
                                            <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                <img alt="Viva" th:src="@{/assets/front/imgs/shop/thumbnail-4.jpg}">
                                            </a>
                                        </div>
                                        <div class="shopping-cart-title">
                                            <h4><a th:href="@{/vm/front/goods/detail?goodsId=1}">Macbook Pro 2022</a>
                                            </h4>
                                            <h3><span>1 × </span>$3500.00</h3>
                                        </div>
                                        <div class="shopping-cart-delete">
                                            <a href="#"><i class="fi-rs-cross-small"></i></a>
                                        </div>
                                    </li>
                                </ul>
                                <div class="shopping-cart-footer">
                                    <div class="shopping-cart-total">
                                        <h4>Total <span>$383.00</span></h4>
                                    </div>
                                    <div class="shopping-cart-button">
                                        <a th:href="@{/vm/front/shop/cart}">浏览购物车</a>
                                        <a th:href="@{/vm/front/shop/checkout}">结算</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="header-action-icon-2 d-block d-lg-none">
                            <div class="burger-icon burger-icon-white">
                                <span class="burger-icon-top"></span>
                                <span class="burger-icon-mid"></span>
                                <span class="burger-icon-bottom"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>


<footer th:fragment="footer" class="main">
    <section class="newsletter p-30 text-white wow fadeIn animated">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 mb-md-3 mb-lg-0">
                    <div class="row align-items-center">
                        <div class="col flex-horizontal-center">
                            <img class="icon-email" th:src="@{/assets/front/imgs/theme/icons/icon-email.svg}" alt="">
                            <h4 class="font-size-20 mb-0 ml-3">关注我们的实时动态</h4>
                        </div>
                        <div class="col my-4 my-md-0 des">
                            <h5 class="font-size-15 ml-4 mb-0">...首次获得 <strong>25元的购物优惠券</strong></h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <!-- Form -->
                    <form class="form-subcriber d-flex wow fadeIn animated">
                        <input class="form-control bg-white font-small coupon-code" placeholder="优惠码,自行保存">
                        <button class="btn bg-dark text-white get-coupon" type="button">获取</button>
                    </form>
                    <!-- End Form -->
                </div>
            </div>
        </div>
    </section>
    <section class="section-padding footer-mid">
        <div class="container pt-15 pb-20">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="widget-about font-md mb-md-5 mb-lg-0">
                        <div class="logo logo-width-1 wow fadeIn animated">
                            <a th:href="@{/vm/front/index}"><img th:src="@{/assets/front/imgs/theme/logo.png}"
                                                                 alt="logo"></a>
                        </div>
                        <h5 class="mt-20 mb-10 fw-600 text-grey-4 wow fadeIn animated">联系方式</h5>
                        <p class="wow fadeIn animated">
                            <strong>地址: </strong>562 Wellington Road, Street 32, San Francisco
                        </p>
                        <p class="wow fadeIn animated">
                            <strong>电话: </strong>+01 2222 365 /(+91) 01 2345 6789
                        </p>
                        <p class="wow fadeIn animated">
                            <strong>在线时间: </strong>10:00 - 18:00, Mon - Sat
                        </p>
                        <h5 class="mb-10 mt-30 fw-600 text-grey-4 wow fadeIn animated">关注我们</h5>
                        <div class="mobile-social-icon wow fadeIn animated mb-sm-5 mb-md-0">
                            <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                            <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                            <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a>
                            <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a>
                            <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-youtube.svg}" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-3">
                    <h5 class="widget-title wow fadeIn animated">关于</h5>
                    <ul class="footer-list wow fadeIn animated mb-sm-5 mb-md-0">
                        <li><a >About Us</a></li>
                        <li><a>Delivery Information</a></li>
                        <li><a >Privacy Policy</a></li>
                        <li><a >Terms &amp; Conditions</a></li>
                        <li><a >Contact Us</a></li>
                        <li><a >Support Center</a></li>
                    </ul>
                </div>
                <div class="col-lg-2  col-md-3">
                    <h5 class="widget-title wow fadeIn animated">账户</h5>
                    <ul class="footer-list wow fadeIn animated">
                        <li><a >Sign In</a></li>
                        <li><a >View Cart</a></li>
                        <li><a >My Wishlist</a></li>
                        <li><a >Track My Order</a></li>
                        <li><a >Help</a></li>
                        <li><a>Order</a></li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <h5 class="widget-title wow fadeIn animated">下载应用程序</h5>
                    <div class="row">
                        <div class="col-md-8 col-lg-12">
                            <p class="wow fadeIn animated">通过应用商城或者软件商店</p>
                            <div class="download-app wow fadeIn animated">
                                <a href="#" class="hover-up mb-sm-4 mb-lg-0"><img class="active"
                                                                                  th:src="@{/assets/front/imgs/theme/app-store.jpg}"
                                                                                  alt=""></a>
                                <a href="#" class="hover-up"><img th:src="@{/assets/front/imgs/theme/google-play.jpg}"
                                                                  alt=""></a>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-12 mt-md-3 mt-lg-0">
                            <p class="mb-20 wow fadeIn animated">安全支付方式</p>
                            <img class="wow fadeIn animated" th:src="@{/assets/front/imgs/theme/payment-method.png}"
                                 alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container pb-20 wow fadeIn animated">
        <div class="row">
            <div class="col-12 mb-20">
                <div class="footer-bottom"></div>
            </div>
            <div class="col-lg-6">
                <p class="float-md-left font-sm text-muted mb-0">
                    &copy; 2021, <strong class="text-brand">Viva</strong>
                </p>
            </div>
            <div class="col-lg-6">
                <p class="text-lg-end text-start font-sm text-muted mb-0">
                    Designed by <a href="http://alithemes.com" target="_blank">Alithemes.com</a>. All rights reserved
                </p>
            </div>
        </div>
    </div>

</footer>
<div th:fragment="loader">
    <!-- Preloader Start 预加载器-->
    <div id="preloader-active">
        <div class="preloader d-flex align-items-center justify-content-center">
            <div class="preloader-inner position-relative">
                <div class="text-center">
                    <h5 class="mb-5">加载中</h5>
                    <div class="loader">
                        <div class="bar bar1"></div>
                        <div class="bar bar2"></div>
                        <div class="bar bar3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:fragment="scripts">

    <!-- Vendor 第三方JS-->
    <script th:src="@{/assets/front/js/vendor/modernizr-3.6.0.min.js}"></script>
    <script th:src="@{/assets/front/js/vendor/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/assets/front/js/vendor/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/assets/front/js/plugins/slick.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery.syotimer.min.js}"></script>
    <script th:src="@{/assets/front/js/plugins/wow.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery-ui.js}"></script>
    <script th:src="@{/assets/front/js/plugins/perfect-scrollbar.js}"></script>
    <script th:src="@{/assets/front/js/plugins/magnific-popup.js}"></script>
    <script th:src="@{/assets/front/js/plugins/select2.min.js}"></script>
    <script th:src="@{/assets/front/js/plugins/waypoints.js}"></script>
    <script th:src="@{/assets/front/js/plugins/counterup.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery.countdown.min.js}"></script>
    <script th:src="@{/assets/front/js/plugins/images-loaded.js}"></script>
    <script th:src="@{/assets/front/js/plugins/isotope.js}"></script>
    <script th:src="@{/assets/front/js/plugins/scrollup.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery.vticker-min.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery.theia.sticky.js}"></script>
    <script th:src="@{/assets/front/js/plugins/jquery.elevatezoom.js}"></script>
    <!-- Template  模板JS-->
    <script th:src="@{/assets/front/js/main.js?v=3.4}"></script>
    <script th:src="@{/assets/front/js/shop/shop.js?v=3.4}"></script>
    <script th:src="@{/assets/front/js/common.js}"></script>
</div>

</body>
</html>